<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			#content {
				margin-top: 45px;
			}
			.top{
				position: relative;
			}
			.top>img {
				width: 100%;
			}
			.top>p{
				margin: 0px;
				position: absolute;
				bottom: 15px;
				right: 15px;
				color: #C9AA71;
				font-size: 18px;
			}
		</style>

	</head>

	<body>

		<div id="myapp">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title" v-text="skins[0].name"></h1>
			</header>
			<div id="content">
				<div class="top">
					<img :src="skins[0].big_img" />
					<p v-text="skins[0].big_name"></p>
				</div>

				<div class="">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" :src="datalist.passive_img">
								<div class="mui-media-body">
									{{datalist.pname}}
									<p class="mui-ellipsis" v-text="datalist.pdescribe"></p>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" :src="datalist.q_img">
								<div class="mui-media-body">
									{{datalist.qname}}
									<p class="mui-ellipsis" v-text="datalist.qdescribe"></p>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" :src="datalist.w_img">
								<div class="mui-media-body">
									{{datalist.wname}}
									<p class="mui-ellipsis" v-text="datalist.wdescribe"></p>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" :src="datalist.e_img">
								<div class="mui-media-body">
									{{datalist.ename}}
									<p class="mui-ellipsis" v-text="datalist.edescribe"></p>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" :src="datalist.r_img">
								<div class="mui-media-body">
									{{datalist.rname}}
									<p class="mui-ellipsis" v-text="datalist.rdescribe"></p>
								</div>
							</a>
						</li>

					</ul>
				</div>
			</div>

		</div>

		<script src="js/ip.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()

			var app = new Vue({
				el: "#myapp",
				data: {
					datalist: '',
					skins: ''
				}
			})

			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				var hid = self.hid;
				console.log(hid)

				mui.ajax('http://' + ip + '/wzry/index.php?g=api&c=hero&a=herodis', {
					data: {
						hid: hid
					},
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(data) {
						//						console.log(data[0].big_img)
						//						app.datalist = data
						app.datalist = data.skill
						app.skins = data.herodata
					},
					error: function(xhr, type, errorThrown) {
						console.log(type)
					}
				});
			})
		</script>
	</body>

</html>